/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import type { ChargeSustainCType } from '../types/ChargeSustain';
import { Form, Input, Button, DatePicker } from 'antd';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import moment from 'moment';
import { ChargeSusTainColumn } from './utils';
import CommonTable from './_common/CommonTable';
import CommonResetButton from './_common/CommonResetButton';

const FormItem = Form.Item;

interface FormValueType {
  order_number: string;
  trade_number: string;
  time: any;
}

const kbType = {
  s: '快递员',
  yz: '驿站',
  shop: '网点',
  v_home: '微掌柜',
  c: '微快递小程序',
  regiment: '全寄小程序',
};

const ChargeSustainC = (props: ChargeSustainCType) => {
  const { screenSize, dispatch, chargeData, activeKey, tableLoading } = props;
  const [form] = Form.useForm();
  const onFinish = (values: FormValueType) => {
    dispatch({
      type: 'customerSearch/getChargeList',
      payload: {
        ...values,
        time: moment(values.time).format('YYYY-MM-DD'),
      },
    });
  };
  const onReset = () => {
    form.resetFields();
    dispatch({
      type: 'customerSearch/save',
      payload: {
        chargeData: {},
      },
    });
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        layout={screenSize ? 'vertical' : 'inline'}
        style={{ marginBottom: 20 }}
      >
        <FormItem
          label={'商户订单号'}
          name='order_number'
          // rules={[{ required: true, message: '请输入商户订单号' }]}
        >
          <Input allowClear style={{ width: 200 }} placeholder={'请输入商户订单号'} />
        </FormItem>
        <FormItem
          label={'交易号'}
          name='trade_number'
          // rules={[{ required: true, message: '请输入交易号' }]}
        >
          <Input allowClear style={{ width: 200 }} placeholder={'请输入交易号'} />
        </FormItem>

        <FormItem label={'日期'} name='time' initialValue={moment()}>
          <DatePicker style={{ width: 200 }} disabledDate={(event) => event > moment()} />
        </FormItem>
        <FormItem>
          <Button type='primary' htmlType='submit' loading={false}>
            查询
          </Button>
          <CommonResetButton onReset={onReset} />
        </FormItem>
      </Form>
      <CommonTable
        title='查询结果'
        columns={ChargeSusTainColumn[activeKey]}
        datasource={[
          {
            ...chargeData,
            kb_type: chargeData?.kb_type ? kbType[chargeData?.kb_type] : '',
          },
        ]}
        loading={tableLoading}
      />
    </>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  chargeData: { ...(customerSearch.chargeData || {}), id: '1' },
  tableLoading: loading.effects['customerSearch/getChargeList'],
}))(React.memo(ChargeSustainC));
